<template>
  <NuxtLayout name="user" menuActive="0">
    <div class="box">
      <div class="box_title">基本信息</div>
      <el-form :model="saveForm" :rules="saveFormRules" ref="saveFormRef" label-width="120px">
        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="saveForm.nickName" placeholder="请输入昵称" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="saveForm.sex">
            <el-radio :label="0" :value="0">男</el-radio>
            <el-radio :label="1" :value="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="saveForm.email" placeholder="请输入邮箱" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="头像">
          <div class="avatar-uploader" v-if="saveForm.profilesPic">
            <el-image :src="saveForm.profilesPic" :preview-src-list="[saveForm.profilesPic]" class="avatar" fit="cover" />
          </div>
          <el-upload class="avatar-uploader" action="https://edu.dzyxzx.cn/api/upload" accept="image/*" name="files"
            :show-file-list="false" :multiple="false" :on-progress="uploadProgressFn" :on-success="profilesPicFn">
            <el-icon class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="身份证人像面">
          <div class="avatar-uploader" v-if="saveForm.idFrontImg">
            <el-image :src="saveForm.idFrontImg" :preview-src-list="[saveForm.idFrontImg]" class="avatar" fit="cover" />
          </div>
          <el-upload class="avatar-uploader" action="https://edu.dzyxzx.cn/api/upload" accept="image/*" name="files"
            :show-file-list="false" :multiple="false" :on-progress="uploadProgressFn" :on-success="idFrontImgFn">
            <el-icon class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="身份证国徽面">
          <div class="avatar-uploader" v-if="saveForm.idBackImg">
            <el-image :src="saveForm.idBackImg" :preview-src-list="[saveForm.idBackImg]" class="avatar" fit="cover" />
          </div>
          <el-upload class="avatar-uploader" action="https://edu.dzyxzx.cn/api/upload" accept="image/*" name="files"
            :show-file-list="false" :multiple="false" :on-progress="uploadProgressFn" :on-success="idBackImgFn">
            <el-icon class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="健康证明">
          <div class="avatar-uploader" v-if="saveForm.medicalCert">
            <el-image :src="saveForm.medicalCert" :preview-src-list="[saveForm.medicalCert]" class="avatar" fit="cover" />
          </div>
          <el-upload class="avatar-uploader" action="https://edu.dzyxzx.cn/api/upload" accept="image/*" name="files"
            :show-file-list="false" :multiple="false" :on-progress="uploadProgressFn" :on-success="medicalCertFn">
            <el-icon class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="学历证明">
          <div class="avatar-uploader" v-if="saveForm.diplomaCert">
            <el-image :src="saveForm.diplomaCert" :preview-src-list="[saveForm.diplomaCert]" class="avatar" fit="cover" />
          </div>
          <el-upload class="avatar-uploader" action="https://edu.dzyxzx.cn/api/upload" accept="image/*" name="files"
            :show-file-list="false" :multiple="false" :on-progress="uploadProgressFn" :on-success="diplomaCertFn">
            <el-icon class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="大头证件照">
          <div class="avatar-uploader" v-if="saveForm.headShot">
            <el-image :src="saveForm.headShot" :preview-src-list="[saveForm.headShot]" class="avatar" fit="cover" />
          </div>
          <el-upload class="avatar-uploader" action="https://edu.dzyxzx.cn/api/upload" accept="image/*" name="files"
            :show-file-list="false" :multiple="false" :on-progress="uploadProgressFn" :on-success="headShotFn">
            <el-icon class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" :disabled="saveDisabled" @click="saveFn">保存用户信息</el-button>
        </el-form-item>
      </el-form>
    </div>
  </NuxtLayout>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
import { updateUserInfoApi } from '~/server/api'
// TDK
const prevHost = useRequestHeaders()["x-forwarded-proto"];
const host = useRequestHeaders()["host"];
const fullPath = useRoute()["fullPath"];
useSeoMeta({
  title: "技考邦_个人信息",
  keywords: "技考邦,个人信息",
  description: "技考邦，个人信息。",
  ogTitle: "技考邦_个人信息",
  ogDescription: "技考邦，个人信息。",
  ogType: "article",
  ogUrl: `${prevHost}://${host}${fullPath}`,
});
const userinfo = useRoute().meta.userinfo || {};
const saveForm = reactive({
  nickName: userinfo.nickName,
  email: userinfo.email,
  profilesPic: userinfo.profilesPic,
  sex: 0,
  idFrontImg: userinfo.idFrontImg,
  idBackImg: userinfo.idBackImg,
  medicalCert: userinfo.medicalCert,
  diplomaCert: userinfo.diplomaCert,
  headShot: userinfo.headShot
})
const saveDisabled = ref(false)
// 表单验证
const saveFormRef = ref(null)
const saveFormRules = {
  nickName: [
    { required: true, message: '请输入昵称', trigger: 'blur' }
  ],
  email: [
    { required: false, pattern: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/, message: '请正确输入邮箱', trigger: 'blur' }
  ]
}
// 上传中
function uploadProgressFn(e) {
  const loading = ElLoading.service({
    text: `上传中...`
  })
  if (e.percent >= 100) {
    loading.close()
  }
}
// 上传
function profilesPicFn({ errno, errmsg, result }) {
  if (errno === 0) {
    saveForm.profilesPic = result[0];
    return false
  }
  ElMessage.error(errmsg)
}
function idFrontImgFn({ errno, errmsg, result }) {
  if (errno === 0) {
    saveForm.idFrontImg = result[0];
    return false
  }
  ElMessage.error(errmsg)
}
function idBackImgFn({ errno, errmsg, result }) {
  if (errno === 0) {
    saveForm.idBackImg = result[0];
    return false
  }
  ElMessage.error(errmsg)
}
function medicalCertFn({ errno, errmsg, result }) {
  if (errno === 0) {
    saveForm.medicalCert = result[0];
    return false
  }
  ElMessage.error(errmsg)
}
function diplomaCertFn({ errno, errmsg, result }) {
  if (errno === 0) {
    saveForm.diplomaCert = result[0];
    return false
  }
  ElMessage.error(errmsg)
}
function headShotFn({ errno, errmsg, result }) {
  if (errno === 0) {
    saveForm.headShot = result[0];
    return false
  }
  ElMessage.error(errmsg)
}
// 保存用户信息
function saveFn() {
  saveFormRef.value.validate((vali) => {
    if (vali) {
      saveDisabled.value = true;
      useServerRequest(updateUserInfoApi, {
        method: 'post',
        body: JSON.stringify(saveForm)
      }).then(({ errno, errmsg }) => {
        setTimeout(() => {
          saveDisabled.value = false;
        }, 1500)
        if (errno === 0) {
          ElMessage.success('保存成功')
          useRoute().meta.userinfo.nickName = saveForm.nickName;
          useRoute().meta.userinfo.email = saveForm.email;
          useRoute().meta.userinfo.profilesPic = saveForm.profilesPic;
          useRoute().meta.userinfo.idFrontImg = saveForm.idFrontImg;
          useRoute().meta.userinfo.idBackImg = saveForm.idBackImg;
          useRoute().meta.userinfo.medicalCert = saveForm.medicalCert;
          useRoute().meta.userinfo.diplomaCert = saveForm.diplomaCert;
          useRoute().meta.userinfo.headShot = saveForm.headShot;
          return false
        }
      }).catch(err => {
        ElMessage.error(err)
        saveDisabled.value = false;
      })
    } else {
      ElMessage.warning('请完善基本信息表单')
      return false
    }
  })
}
</script>

<style lang="less">
.avatar-uploader {

  .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .el-upload:hover {
    border-color: var(--el-color-primary);
  }
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 198px;
  height: 198px;
  text-align: center;
}
</style>
<style lang="less" scoped>
.box {
  padding: 30px;

  &_title {
    font-size: 20px;
    color: #333333;
    margin-bottom: 30px;
  }

  .avatar-uploader {
    border-radius: 6px;
    overflow: hidden;

    +.avatar-uploader {
      margin-left: 20px;
    }

    .avatar {
      width: 198px;
      height: 198px;
      display: block;
    }
  }
}
</style>